import React, { Component } from 'react'
import store from '../../../store/store'

import '@css/city/list-foreign.scss'

export default class ListForeign extends Component{
    constructor(props){
        super(props)
        this.state = {
            foreignClass: [],
            nowClass: 0,
            nowClassData: undefined
        }
    }
    render() {
        return <div className="list-foreign">
            <ul className="left">
                {this.state.foreignClass.map((item, index)=>
                    <li
                        key={index}
                        className={this.state.nowClass === index ? 'active':''}
                        onClick={()=>this.handleClassClick(index)}
                    >{item}</li>
                )}
            </ul>
            <div className="right">
                <div className="area">
                    <div className="title">热门地点</div>
                    <div className="body">
                        {this.state.nowClassData && this.state.nowClassData.recommend && this.state.nowClassData.recommend.map(item=>
                            <div className="imgbox" key={item.id} onClick={()=> this.handleCityClick(item.name)}>
                                <img src={item.imgUrl} alt=""/>
                                <div className="info">{item.name}</div>
                            </div>
                        )}
                    </div>
                </div>
                {this.state.nowClassData && this.state.nowClassData.normal && this.state.nowClassData.normal.map(item=>
                    <div className="area" key={item.title}>
                        <div className="title">{item.title}</div>
                        <div className="body">
                            {item.data && item.data.map(city=>
                                <div className="btn" key={city.id} onClick={()=> this.handleCityClick(city.name)}>{city.name}</div>
                            )}
                        </div>
                    </div>
                )}
            </div>
        </div>
    }
    // 城市选取
    handleCityClick = (city)=>{
        store.dispatch({type: 'SETCITY', city: city})
        window.history.go(-1)
    }
    // 左侧类别选取
    handleClassClick = (index)=>{
        let nowClassData = this.props.foreignCities[this.state.foreignClass[index]]
        this.setState({
            nowClass: index,
            nowClassData
        })

    }
    componentWillReceiveProps(nextProps) {
        if(this.state.foreignClass.length === 0){
            let classArr = []
            for(let i in nextProps.foreignCities){
                classArr.push(i)
            }
            this.setState({
                foreignClass: classArr,
                nowClassData: nextProps.foreignCities[classArr[0]]
            })
        }
    }
}